<template>
    <!-- 病情描述 -->
    <view class="dric">
        <text>请详细描述你的病情</text>
        <textarea placeholder-class="placeHolder" v-model="formData.illness" placeholder="为了更好获得医生帮助,请尽可能详细描述病情" />
    </view>
    <!-- 指导用药 -->
    <view class="check">
        <checkbox-group @change="selecDoctor">
            <checkbox value="cb" :checked="formData.guide" color="#2c76ef" style="transform:scale(0.7)" />需要医生指导用药
        </checkbox-group>
    </view>
    <!-- 照片上传 -->
    <view class="upload">
        <text>上传患者照片或检查报告</text>
        <view class="chooseImage">
            <view class="images" v-for="(item,index) in formData.ins_report" :key="index">
                <image :src="item" mode="aspectFill"></image>
                <image @click="remove(index)" class="delete" src="@/static/other/shanchu-goods.svg" mode=""></image>
            </view>
            <view>
                <image src="@/static/other/shuxing-img.png" mode="aspectFill" @click="chooseImage"> </image>
            </view>
        </view>

    </view>
    <!-- 选择就诊人 -->
    <view class="select">
        <text class="selectPatient">选择就诊人</text>
        <view>
            <image src="/static/other/touxiang.svg" mode="aspectFill"></image>
            <text>{{name}}</text>
            <text @click="selectPatient">{{name==''?'选择就诊人' :'重新选择'}}</text>
        </view>
    </view>
    <view style="height: 300rpx"></view>
    <view class="form">
        <view class="submit">
            <text @click="canCel">取消</text>
            <text @click="subMit">提交</text>
        </view>
    </view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Graphics } from "@/public/decl-type";
import { uploadImage } from '@/public/tools'
import { myData } from '@/stroe/index'
import Requestapi from '@/public/request'
import RequestApi from '@/public/request';
// 待提交数据
let formData = reactive<Graphics>({
    illness: '',
    guide: false,
    ins_report: [],
    patient_id: ''
})
let name = ref('');
//监听 store里的patient的改变
let store = myData();
store.$subscribe((mutation, state) => {
    name.value = state.patient.name;
    formData.patient_id = state.patient._id
})
//选择照片
function chooseImage() {
    uploadImage(Requestapi.uploadImg, '上传中', '上传失败').then((res: any) => {
        let data = JSON.parse(res.data)
        formData.ins_report.push(data.data);
    }).catch(err => {
        console.log(err);

    })
}
//删除照片
function remove(index: number) {
    formData.ins_report.splice(index, 1)//删除当前照片
}
//选择是否指导
function selecDoctor(data: any) {
    formData.guide = data.detail.length > 0 ? true : false
}
//取消
function canCel() {
    uni.navigateBack();
}
//选择就诊人
function selectPatient() {
    uni.navigateTo({
        url: '/pages/patient/index'
    })
}
//提交数据
function subMit() {
    uni.showLoading({
        title: '提交中',
        mask: true
    })
    RequestApi.GrapHics(formData).then(res => {
        uni.showToast({ title: '提交成功', icon: 'none', duration: 1000 });
        uni.switchTab({
            url: '/pages/index/index'
        })
    }).catch(err => {
        console.log(err);

    })
}
</script>
<style lang="scss">
page {
    background-color: #f7f7f7;
    padding: 15rpx;
    box-sizing: border-box;
}

.dric {
    background-color: #ffffff;
    padding: 20rpx;

    text {
        font-size: 30rpx;
        font-weight: bold;
        display: block;
        margin-bottom: 20rpx;
    }

    .placeHolder {

        font-size: 25rpx;

    }

    textarea {
        width: 100%;
    }
}

.check {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #ffffff;
}

.upload {
    padding: 20rpx;
    background-color: #ffffff;
    margin-top: 15rpx;

    text {
        font-size: 30rpx;
        font-weight: bold;
        display: block;
    }

    .chooseImage {
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        view {
            width: calc(33% - 7*2rpx);
            margin: 5rpx;
            height: 200rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .images {
            position: relative;

            .delete {
                width: 30rpx !important;
                height: 30rpx !important;
                position: absolute;
                top: 0;
                right: 0;
            }
        }


    }
}

.select {
    margin-top: 20rpx;
    background-color: #ffffff;
    padding: 20rpx;

    .selectPatient {
        font-size: 30rpx;
        font-weight: bold;
    }

    view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10rpx;

        image {
            width: 120rpx;
            height: 120rpx;
        }

        text:nth-of-type(1) {
            font-weight: bold;
            padding: 0 50rpx;
            flex: 1;
        }

        text:nth-of-type(2) {
            color: #2c76ef;
            font-size: 25rpx;
            justify-self: flex-end;
        }

    }
}
</style>